<template>
	<view>
		<view>one页面</view>
		<swiper indicator-dots="true"
			autoplay="true" 
			interval="3000"
			@change="change">
			<swiper-item>
				1
			</swiper-item>
			<swiper-item>
				2
			</swiper-item>
			<swiper-item>
				3
			</swiper-item>
		</swiper>
		
		<button type="primary" @click="toTwo">toTwo</button>
		<button type="primary" @click="toBack">back</button>
		<scroll-view :scroll-x="true" style="white-space: nowrap;">
			<view id="demo1" style="display:inline-block;width:200px;height:100px;background:red">A</view>
			<view id="demo2" style="display:inline-block;width:200px;height:100px;background:yellow">B</view>
			<view id="demo3" style="display:inline-block;width:200px;height:100px;background:blue">C</view>
		</scroll-view>
		
		<view class="ld">
			<view class="left">
				<view v-for="(item,index) in list" :key="index">
					<view :class="{title:index === clickindex}" @click="fclick(index)">{{item.title}}</view>
				</view>
			</view>
			<view class="right">
				<scroll-view :scroll-y="true" 
				style="white-space: nowrap; height: 200px;"
				:scroll-into-view="clickId"
				scroll-with-animation
				@scroll="scroll"
				@scrolltolower="scrolltolow">
				<view v-for="(item,index) in list" :key="index" >
					<view class="content" :id="'item'+index">{{item.title}}</view>
					<view v-for="(item,index) in item.list" :key="index">
						{{item}}
					</view>
				</view>
				</scroll-view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				clickindex:0,
				clickId:'',
				list:[
					{title:"男歌手",list:["周杰伦","林俊杰","李荣浩","陈奕迅","毛不易"]},
					{title:"女歌手",list:["张韶涵","孙燕姿","谢安琪","张惠妹","王菲"]},
					{title:"组合",list:["twins","SHE","飞儿乐队","水木年华"]},
					{title:"国外歌手",list:["霉霉","蕾哈娜","火星哥","阿姆","布莱妮"]}
				],
				tops:[]
			}
		},
		onLoad(option) {
			console.log(option);
		},
		onReady(){
			this.getNodesInfo();
		},
		methods:{
			getNodesInfo(){
				// createSelectorQuery uni中的节点选择方式 ， 返回一个SelectorQuery 对象实例。
				// in(component) 表示将选择器的选取范围更改为自定义组件 component 内
				const query = uni.createSelectorQuery().in(this);
				// select 在当前页面下选择第一个匹配选择器 selector 的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。
				// selectAll 在当前页面下选择匹配选择器 selector 的所有节点
				query.selectAll('.content').boundingClientRect(data => {
					// boundingClientRect 添加节点的布局位置的查询请求。相对于显示区域。返回 NodesRef 对应的 SelectorQuery。
				  console.log("得到布局位置信息" + JSON.stringify(data));
				  console.log("节点离页面顶部的距离为" + data.top);
				}).exec((res)=>{
					// exec 执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。
					let temp = res[0];
					let tep = [];
					temp.map( item => {
						  // tops.push(top);
						  tep.push(item.top);
					})
					this.tops = tep;
				});
			},
			scroll(e){
				for(let i = 0;i<this.tops.length;i++){
					const top1 = this.tops[i];
					const top2 = this.tops[i+1];
					if(top1 < e.target.scrollTop && top2 > e.target.scrollTop){
						this.clickindex = i;
					}
				}
				console.log(e.target.scrollTop);
			},
			scrolltolow(){
				setTimeout(()=>{
					this.clickindex = this.list.length - 1
				},80)
			},
			
			fclick(index){
				this.clickindex = index
				this.clickId = "item"+index
			},
			
			toTwo(){
				// 当需要循环跳转时，用redirectTo.因为navigateTo的栈有数量限制
				uni.redirectTo({
					url:"../two/two"
				})
			},
			toBack(){
				uni.navigateBack()
			},
			change(e){
				console.log(e.target.current)
			}
		}
	}
</script>

<style lang="scss">
	.content{
		font-weight: bold;
		background: pink;
	}
	.title{
		font-size: 20px;
		font-weight: bold;
		background: pink;
	}
	.ld{
		display: flex;
		.left{
			width: 100px;
			border: 1px solid red;
		}
		.right{
			flex: 1;
		}
	}
</style>
